<template>
  <ChartHeader title="各年级预警分布" :go-to-detail="goToDetail"></ChartHeader>

  <v-chart class="chart" :option="option" />
</template>

<script lang="ts" setup>
import { defineProps, reactive, toRefs, watchEffect } from 'vue'

import { NumData, TotalData } from '../types'
import { useGradeWarning } from '../use/useGradeWarning'
import { useRouter } from 'vue-router'
import ChartHeader from './ChartHeader.vue'
import VChart from 'vue-echarts'

const props = defineProps<{
  numData: NumData | null
  totalData: TotalData | null
}>()

const router = useRouter()

function goToDetail() {
  router.push({ name: 'TodoDetail', query: { activeNames: 'warn' } })
}

const { option } = useOptions()

function useOptions() {
  const { numData } = toRefs(props)

  const { xAxisDataGrade, seriesGradeData, levelDictValueData } =
    useGradeWarning({
      numData,
    })

  const option = reactive({})

  watchEffect(() => {
    Object.assign(option, {
      title: {
        // text: title,
        textStyle: {
          color: '#0986b3',
        },
      },
      legend: {
        right: '0%',
        align: 'right',
        data: levelDictValueData.value,
        textStyle: {
          // color: 'white',
          fontSize: 10,
        },
      },
      grid: {
        top: '20%',
        bottom: '15%',
        right: 20,
        height: 190,
      },
      xAxis: {
        type: 'category',
        data: xAxisDataGrade.value,
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
            // color: 'white',
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
            // color: 'white',
          },
        },
      },
      series: seriesGradeData.value,
    })
  })
  return {
    option,
  }
}
</script>

<style scoped lang="less">
@import url('./board-common.less');

.chart {
  height: 300px;
}
</style>
